<template>
  <view class="scroll_to_top">
    <text class="iconfont icon-arrow-up" :class="scrollTop < maxHeight ? 'hide' : ''" @click="goTop"></text>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {
      scrollTop: {
        // 屏幕滚动高度
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        maxHeight: 400, // 屏幕滚动出现按钮的距离
      }
    },
    onLoad() {},
    methods: {
      goTop() {
        uni.pageScrollTo({ // 滚动到顶部
          scrollTop: 0
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .scroll_to_top {
    .iconfont {
      z-index: 100;
      position: fixed;
      right: 20upx;
      bottom: 200upx;
      text-align: center;
      width: 50upx;
      height: 50upx;
      line-height: 50upx;
      color: white;
      background: rgba(51, 51, 51, 0.8);
      border-radius: 50%;
      padding: 10upx;
      font-size: 40upx;
      opacity: 1;
      transition: all .5s;
    }
    .hide {
      opacity: 0;
      bottom: -80upx;
    }
  }
</style>
